<template>
  <header class="app-nav">
    <div class="nav-inner">
      <div class="brand" @click="go('/entries')">MirrorForest</div>
      <nav class="links">
        <el-button text @click="go('/home')">主页</el-button>
        <el-button text @click="go('/entries')">日志</el-button>
        <el-button text @click="go('/entries/new')">新建</el-button>
        <el-button text @click="go('/tags')">标签</el-button>
        <el-button text @click="go('/summaries')">摘要</el-button>
        <el-button text @click="go('/badges')">徽章</el-button>
        <el-button text @click="go('/analytics')">分析</el-button>
        <el-button text @click="go('/user-center')">个人中心</el-button>
      </nav>
      <div class="user">
        <el-avatar size="small" :src="user.value?.avatar_url || ''">{{ initials }}</el-avatar>
        <span class="username">{{ user.value?.username || user.value?.display_name || user.value?.email || '已登录' }}</span>
        <el-button class="logout" size="small" @click="logout" link>退出</el-button>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/auth/user'
import { storeToRefs } from 'pinia'

const router = useRouter()
const userStore = useUserStore()
const { user } = storeToRefs(userStore)

const initials = computed(() => (user.value?.username || 'U').slice(0, 1).toUpperCase())

function go(path: string) {
  router.push(path)
}
function logout() {
  userStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.app-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
.brand {
  font-weight: 700;
  color: #5a3e2b;
  cursor: pointer;
}
.links { display: flex; gap: 6px; }
.user { display: flex; gap: 8px; align-items: center; color: #6b4f3a; }
.username { font-weight: 600; }
.logout { color: #a47e65; }
</style>